<template>
  <div>
    <!-- 所有罚单 -->
    <el-table
      :data="tickets"
      style="width: 100%"
      :default-sort="{ prop: 'date' }"
    >
      <el-table-column label="序号" type="index" prop="index" sortable>
        <template slot-scope="scope">
          <span>{{ (page.current - 1) * page.size + scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="车牌号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.carNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="违规条例">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ruleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="罚单金额">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="扣分数">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.cutScore }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理时间" prop="date" sortable>
        <template slot-scope="scope">
          <span>{{ formatTimer(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="罚单状态">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.state }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
<!--          <span style="margin-left: 10px" @click="solve(scope.row)">处理</span> -->
          <span style="margin-left: 10px" @click="appeal()">申诉</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :spam="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[3, 5, 10, 50]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      style="text-align: center"
    >
    </el-pagination>
    <!-- 处理罚单对话框 -->
  <el-dialog title="处理罚单" :visible.sync="ticketForm.showSolve" width="30%">
      <el-form ref="ticketForm" label-width="80px">
        <br>
        <el-form-item label="车牌号">
          <el-col :span="22">
            <el-input placeholder=""  v-model="ticketForm.carNo" readonly></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="违法条例">
          <el-col :span="22">
            <el-input placeholder="" v-model="ticketForm.ruleName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="罚金">
          <el-col :span="22">
            <el-input placeholder="" v-model="ticketForm.money"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="扣分">
          <el-col :span="22">
            <el-input placeholder="" v-model="ticketForm.cutScore"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="topay()">去支付</el-button>
        <el-button @click="ticketForm.showSolve = false">取 消</el-button>
        <el-button type="primary" @click="saveAnd ()">保存</el-button>
      </span>
    </el-dialog>
    <!-- 支付弹窗 -->
    <el-dialog title="扫描支付" :visible.sync="isShow" width="30%">
        <div id="code" style="width:300px;height: 300px;" ></div>
     </el-dialog>
  </div>
</template>
<script>
import Url from "@/util/URLUtil";
export default {
  name: "tickets",
  data() {
    return {
      loginDriverCardId:"",
      tickets: [],
      page: {
        current: 1, //当前页
        size: 5, //每页数据条数
        pages: 0, //总页数
        total: 0, //总数据条数
      },
      ticketForm:{
        carNo:"",
        ruleId:"",
        ruleName:"",
        money:"",
        cutScore:"",
        showSolve:false,
      },
      //支付二维码模态框显示
      isShow:false,
    };
  },
  methods: {
    //初始化表格数据
    initAllTicketTable() {
      var self = this;
      $.ajax({
        url: Url.url + "/api/getSolvedTicketAndRuleByCardId",
        type: "get",
        contentType: "application/json",
        // dataType: "json",
        data: { current: self.page.current, size: self.page.size ,cardId:self.loginDriverCardId},
        success(response) {
          console.log(response.records);
          self.tickets = response.records;
          self.page.total = response.total;
          self.page.size = response.size;
          self.page.current = response.current;
          self.page.pages = response.pages;
        },
      });
    },
    // //处理罚单功能
    // solve(row){
    //   console.log("处理"+row.id+"号罚单,"+"违反"+row.ruleId);
    //   //获取罚单相应条例并展示
    //    console.log(row);
    //    //将数据绑定到模态框
    //    this.ticketForm.carNo=row.carNo;
    //    this.ticketForm.ruleName=row.ruleName;
    //    this.ticketForm.money=row.money;
    //    this.ticketForm.cutScore=row.cutScore;
    //    this.ticketForm.ruleId=row.ruleId;
    //    this.ticketForm.showSolve=true;
    // },
    // //支付罚金
    // topay(){
    //   //显示弹窗
    //   this.isShow = true;
    //   var mythis = this;
    //   //清空二维码窗口
    //   document.getElementById("code").innerHTML = "";
    //   $.ajax({
    //     url: "http://localhost:8080/api/pay",
    //     type: "get",
    //     data:{
    //       carNo:mythis.ticketForm.carNo,
    //       ruleName:mythis.ticketForm.ruleName,
    //       money:mythis.ticketForm.money,
    //       ruleId:mythis.ticketForm.ruleId,
    //       cutScore:mythis.ticketForm.cutScore,
    //     },
    //     success:function(data){
    //         if(data.url!="error"){
    //           var qrcode = new QRCode(document.getElementById("code"), {
    //                width : 300,
    //                height : 300
    //            });
    //            //生成二维码
    //            qrcode.makeCode(data.url);
    //         }else{
    //           mythis.$alert("生成二维码失败");
    //         }

    //     }
    //   })
    // },
    //申诉功能
    appeal(){
      window.open("https://sc.122.gov.cn/m/showFeedBack", '_blank');
    },
    //修改每页尺寸
    handleSizeChange(val) {
      this.page.size = val;
      this.page.current = 1;
      this.initAllTicketTable();
    },
    //修改当前页
    handleCurrentChange(val) {
      this.page.current = val;
      this.initAllTicketTable();
    },
    //日期格式化工具
    formatTimer(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    },
  },
  mounted() {
    this.loginDriverCardId=localStorage.getItem("loginDriverCardId");
    // this.loginDriverCardId="500235199805059270"
    this.initAllTicketTable();
  },
};
</script>
